/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
// src/components/BlogPost.tsx

"use client";

import React from "react";
import Link from "next/link";
import { BlogPostProps } from "@/lib/getBlogPosts";
import ErrorBoundary from "./ErrorBoundary";
import ScrollProgressBar from "./ScrollProgressBar";

const BlogPost: React.FC<{
  post: BlogPostProps;
  relatedPosts: BlogPostProps[];
}> = ({ post, relatedPosts }) => {
  if (!post) {
    return (
      <div className="container mx-auto px-4 py-8 text-center">
        Error: Post data is missing
      </div>
    );
  }

  const renderHTMLContent = () => {
    if (!post.htmlContent) {
      return <div className="text-red-500">Error: HTML content is missing</div>;
    }

    return (
      <div
        className="prose lg:prose-xl"
        dangerouslySetInnerHTML={{ __html: post.htmlContent }}
      />
    );
  };

  return (
    <div className="bg-gray-100 font-sans leading-normal tracking-normal">
      <ErrorBoundary fallback={<div>Error loading header</div>}>
        <header className="fixed w-full z-10 top-0 bg-white shadow">
          <ScrollProgressBar />
          <nav className="container mx-auto px-4 py-2">
            <Link href="/blog" className="text-gray-800 hover:text-gray-600">
              ← Back to Blog
            </Link>
          </nav>
        </header>
      </ErrorBoundary>

      <div className="container mx-auto px-4 py-8 max-w-4xl">
        <ErrorBoundary fallback={<div>Error loading post content</div>}>
          {renderHTMLContent()}
        </ErrorBoundary>
      </div>
    </div>
  );
};

export default BlogPost;
